<template>
<div id="resetPsw">
      <!--后退-->
      <img style="height:0.75rem;width:0.4rem;margin:0.9rem 0.6rem;"src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
      <div style="margin:2.5rem auto;width:80%;">
          <section style="height:2.5rem;box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;border-radius:13px;padding:0.75rem;background:#fff; ">
              <div style="border-bottom:1px solid #e2e2e2;display:flex;justify-content:space-between;">
                 <p style="color:#888888;font-size:0.6rem;"><input v-model="conData.verifyCode" type="text" placeholder="请输入验证码"></p>
                 <p style="color:#29a193;font-size:0.7rem;" @click="resetPsw">获取验证码</p> 
              </div>
          </section>
          <section style="height:12.5rem;box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;border-radius:13px;background:#fff;">
              <p style="width:60%;height:2.25rem;margin:auto;line-height:3.5rem;font-size:0.8rem;color:#888888;
                  text-align:center;border-bottom:1px solid #e2e2e2;">
                  请输入四位交易密码
              </p> 
              <section style="width:80%;margin:3rem auto;font-size:1rem;display:flex;justify-content: space-around;">
                  <input ref="input1" v-model="iput1" maxlength="1"  v-focus style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                  <input ref="input2" v-model="iput2" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                  <input ref="input3" v-model="iput3" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
                  <input ref="input4" v-model="iput4" maxlength="1" style="height:3rem;width:3rem;text-align:center;height:3rem;border:1px solid #8a8a8a;" type="text">
              </section> 
          </section>
      </div>
      <p style="width:50%;background:#29a193;margin:7.5rem auto;text-align:center;height:2.5rem;line-height:2.5rem;color:#fff;font-size:0.7rem;display:flex;
              justify-content: space-around;border-radius:13px;" @click="confirmSure">确定</p>

</div>
</template>
<script>
export default {
  data () {
    return {
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
        conData:{
            payPassword:undefined,
            userId:undefined,
            verifyCode:undefined,
        },
    }
  },
   watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
    created(){
        this.conData.userId= this.$route.params.id
    },
  methods:{
      confirmSure(){
           this.conData.payPassword = this.iput1+this.iput2+this.iput3+this.iput4
           this.$router.push({
            path: '/resetAgain',
            name: 'resetAgain', 
            params: {
                name: 'resetAgain',
                data:this.conData,
            }
        })
      },
    //  获取验证码
    resetPsw(){
        this.$api.setCuUserPs().then((res)=>{
            if(res.code=='000000'){
                this.conData.verifyCode = JSON.parse(res.data).code
                console.log(this.conData)
            }
        })
    }
  }
}
</script>
<style>
#resetPsw{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url('../../assets/me/pswbg.png');
}
 
</style>